<template>
  <div class="container" :style="{ height: contentHeight }">
    <el-timeline>
      <el-timeline-item
        v-for="(item, index) in list"
        :key="index"
        type="success"
        color="#a5ecd7"
        size="large"
      >
        <div class="u-flex">
          <el-avatar size="small" style="margin-right: 30px">{{
            item.loger.slice(0, 1)
          }}</el-avatar>
          <span>{{ item.loger }}</span>
          <span>{{ item.logcontent }}</span>
          <span>{{ item.logtime }}</span>
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
import { getLog } from "@/api/common";
export default {
  name: "RelativeHandle",

  data() {
    return {
      list: [],
      // contentHeight:
      //   document.documentElement.clientHeight - 280 + this.height + "px",
    };
  },

  computed: {
    contentHeight() {
      if (this.height == 0) {
        return document.documentElement.clientHeight - 280 + "px";
      } else {
        return document.documentElement.clientHeight - 280 + this.height + "px";
      }
    },
  },

  props: {
    /** 任务ID */
    id: [String, Number],

    /**高度 */
    height: { type: [Number], default: 0 },
  },

  mounted() {},

  watch: {
    id: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.getList(newVal);
        }
      },
      deep: true,
      immediate: true,
    },
  },

  methods: {
    getList(id) {
      getLog({ dutyid: id }).then((res) => {
        this.list = res.Data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  overflow-y: auto;
  span + span {
    margin-right: 30px;
  }
}
</style>